<template>
  <div>
    <home-header @sidebar="toggleSideBar" @userbox="toggleUserBox"></home-header>
    <home-swiper :list="SwiperList"></home-swiper>
    <list-slider :list="movieList" :title="'影推热门'"></list-slider>
    <!-- <home-list :list="movieList"></home-list> -->
    <rank :title="'评分榜'" :icon="'&#xe624;'" :list="scoreList" :animationName="'tada'"/>
    <rank :title="'收藏榜'" :icon="'&#xe61b;'" :list="starList" :animationName="'swing'"/>
    <rank :title="'评论榜'" :icon="'&#xe600;'" :list="commentList" :animationName="'heartBeat'"/>
    <home-side-bar :show="SideBar" :name="name" :list="LinkList" @sidebar="toggleSideBar" @infobox="toggleInfoBox"></home-side-bar>
    <home-user :show="UserBox" @userbox="toggleUserBox"></home-user>
    <home-info :show="InfoBox" @infobox="toggleInfoBox"></home-info>
  </div>
</template>

<script>
import HomeHeader from './components/Header'
import HomeSwiper from './components/Swiper'
import HomeList from 'common/List'
import ListSlider from 'common/ListSlider'
import HomeSideBar from './components/SideBar.vue'
import HomeUser from 'common/user/User.vue'
import HomeInfo from 'common/ChangeInfo.vue'
import FadeAnimation from 'common/fade/FadeAnimation.vue'
import Rank from 'common/Rank'
import axios from 'axios'
export default {
  name: 'Home',
  components: {
    HomeHeader,
    HomeSwiper,
    HomeList,
    HomeSideBar,
    HomeUser,
    FadeAnimation,
    ListSlider,
    Rank,
    HomeInfo
  },
  data () {
    return {
      SideBar: false,
      UserBox: false,
      InfoBox: false,
      name: 'Mokia',
      movieList: [],
      scoreList: [],
      starList: [],
      commentList: [],
      SwiperList: [],
      LinkList: [{
        id: 1,
        color: '#f3715c',
        name: '我的电影',
        icon: '&#xe61b;'
      }]
      // , {
      //   id: 2,
      //   color: '#7fb80e',
      //   name: '我的评论',
      //   icon: '&#xe600;'
      // }
    }
  },
  methods: {
    getSwperList () {
      axios.post('/api/carousel').then(this.getSwiperSucc)
    },
    getSwiperSucc (res) {
      res = res.data
      this.SwiperList = res.data
    },
    getMovieList () {
      axios.get('/api/allClass?orderBy_condition=view_count').then(this.getListSucc)
    },
    getListSucc (res) {
      res = res.data
      this.movieList = res.data.movieList
    },
    toggleSideBar () {
      this.SideBar = !this.SideBar
      this.UserBox = false
      this.InfoBox = false
    },
    toggleUserBox () {
      this.UserBox = !this.UserBox
      this.SideBar = false
      this.InfoBox = false
    },
    toggleInfoBox () {
      this.InfoBox = !this.InfoBox
      this.SideBar = false
      this.UserBox = false
    },
    getScoreList (res) {
      res = res.data
      let list = res.data.movieList
      for (let i = 0; i < list.length; i += 3) {
        let a = []
        for (let j = 0; j < 3; j++) {
          if (i + j >= list.length) break
          a.push({
            id: i + j + 1,
            name: list[i + j].name,
            movie_id: list[i + j].movie_id,
            douban_score: list[i + j].douban_score
          })
        }
        this.scoreList.push(a)
      }
    },
    getStarList (res) {
      res = res.data
      let list = res.data.movieList
      for (let i = 0; i < list.length; i += 3) {
        let a = []
        for (let j = 0; j < 3; j++) {
          if (i + j >= list.length) break
          a.push({
            id: i + j + 1,
            name: list[i + j].name,
            movie_id: list[i + j].movie_id,
            douban_score: list[i + j].douban_score
          })
        }
        this.starList.push(a)
      }
    },
    getCommentList (res) {
      res = res.data
      let list = res.data.movieList
      for (let i = 0; i < list.length; i += 3) {
        let a = []
        for (let j = 0; j < 3; j++) {
          if (i + j >= list.length) break
          a.push({
            id: i + j + 1,
            name: list[i + j].name,
            movie_id: list[i + j].movie_id,
            douban_score: list[i + j].douban_score
          })
        }
        this.commentList.push(a)
      }
    },
    getRank () {
      axios.get('/api/allClass?orderBy_condition=douban_score#desc').then(this.getScoreList)
      axios.get('/api/allClass?orderBy_condition=love_count#desc').then(this.getStarList)
      axios.get('/api/allClass?orderBy_condition=comment_count#desc').then(this.getCommentList)
    }
  },
  mounted () {
    this.getMovieList()
    this.getRank()
    this.getSwperList()
  }
}
</script>
<style lang="stylus" scoped>

</style>
